<template>
  <div>
    <!-- <div style="position: absolute; right: 10px; top: 10px; z-index: 1000">
      <el-button @click="exportData">导出</el-button>
      <el-button @click="importData">导入</el-button>
    </div> -->
    <div class="main">
      <!--      基础控件      -->
      <el-card class="atom-panel">
        <template #header>
          <div class="card-header">
            <div class="text-icon">
              <span>💡</span>
            </div>
            <span>基础控件</span>
          </div>
        </template>
        <basicComtrls></basicComtrls>
      </el-card>
      <!--      表单区域      -->
      <el-card class="form-panel">
        <template #header>
          <div class="card-header">
            <div class="text-icon">
              <span>📑</span>
            </div>
            <span>表单区域</span>
          </div>
        </template>
        <div v-show="form.length === 0" class="tip" style="text-align: center; margin-top: 10px">
          👈 请在左侧选择控件并拖至此处
        </div>
        <div style="overflow-y: auto; height: 80vh">
          <formComponent
            :element="activeData"
            :active-id="choose"
            :copy="copy"
            :delete="del"
            :form="form"
            :choose="chooseComponent"
            @click.stop="chooseComponent(activeData)"
          ></formComponent>
        </div>
      </el-card>
      <!--      编辑控件      -->
      <el-card class="setting-panel">
        <template #header>
          <div class="card-header">
            <div class="text-icon">
              <span>⚙️</span>
            </div>
            <span>编辑控件</span>
          </div>
        </template>
        <div v-if="choose !== '0'">
          <el-card
            class="dra-card cardItem"
            :body-style="{ height: '80vh', overflow: 'auto' }"
            style="margin: 10px"
          >
            <div>
              <el-icon :size="16">
                <component :is="activeData.icon" />
              </el-icon>
              {{ activeData.title }}
            </div>
            <div style="margin-top: 10px">
              <atomConfig :obj="activeData"></atomConfig>
            </div>
          </el-card>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'elForm'
}
</script>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import basicComtrls from '@/components/basicControls/basicControls.vue'
// import FileSaver from 'file-saver'
import formComponent from '../../components/formComponent.vue'
import atomConfig from '../../components//atomConfig.vue'
import { type Basis } from '@/types/element'

const form = ref([])
const activeData = ref({} as Basis)
const choose = ref('0')
// 选中组件
function chooseComponent(element: Basis) {
  activeData.value = element
  choose.value = element.field
}

// 获取随机ticks作为id
function getId() {
  return (
    (Math.floor(Math.random() * (99999 - 10000)) + 10000).toString() +
    new Date().getTime().toString().substring(5)
  )
}

// 删除组件
function del(list: Array<Basis>, id: string) {
  let delIdx = list.findIndex((i) => i.field === id) as number
  if (delIdx >= 0) list.splice(delIdx, 1)
  if (choose.value === id) {
    activeData.value = {} as Basis
    choose.value = '0'
  }
  if (!form.value.length) {
    activeData.value = {} as Basis
    choose.value = '0'
  }
}

// 复制组件
function copy(list: Array<[Basis]>, node: any) {
  let copIndex = list.findIndex((i: any) => i.field === node.field)
  list.splice(copIndex + 1, 0, clone(node))
}

// 克隆组件
function clone(obj: Object) {
  let cloneCp = reactive(JSON.parse(JSON.stringify(obj)))
  cloneCp.field = getId()
  return cloneCp
}

// function exportData() {
//   const data = JSON.stringify(form.value)
//   const blob = new Blob([data], { type: '' })
//   console.log(blob)
//   FileSaver.saveAs(blob, 'ElementForm.json')
// }
</script>

<style lang="scss" scoped>
.cardItem {
  position: relative;
  animation: cardIn 1s;
  -webkit-animation: cardIn 1s;
  /* Safari and Chrome */
}

@keyframes cardIn {
  0% {
    top: -10px;
  }

  100% {
    top: 0;
  }
}

.formCard {
  min-width: 630px;
  margin: 10px;
  cursor: pointer;
}

.main {
  position: absolute;
  top: 20px;
  left: 20px;
  width: calc(100% - 20px);
  height: calc(100% - 40px);
  display: flex;

  .card-header {
    text-align: center;

    .text-icon {
      &:hover {
        -webkit-animation: spin 1s linear 1s 5 alternate;
        animation: spin 1s linear infinite;
      }
    }

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }
  }

  .atom-panel {
    min-width: 300px;
    height: 100%;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }

  .form-panel {
    width: calc(100% - 620px);
    margin: 0 10px;
    padding-bottom: 30px;
  }

  .setting-panel {
    min-width: 300px;
    height: 100%;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
}

:deep(.el-button + .el-button) {
  margin-left: 6px;
}

.el-card__body {
  height: calc(100% - 90px);
  overflow-y: auto;
}

:deep(.el-card__body)::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}
.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
  overflow: auto;
}
</style>
